{% extends "../../_base/layout.html" %} 

{% block css %}
<link rel="stylesheet" href="{{site.static}}/css/personal_form.css"> 
{%endblock%} 

{% block content %}
<div class="step-wrap phone-input">
    {% block header%}
    {% set pageHeaderConf = {pageTitle:__("bemember_phone_page_title"),level:3} %} 
    {% include "../../_base/page_header.html" %} 
    {% endblock %}
    <div class="page-wrap eui--white-bacg">
        <form class="eui-login-form">
            <div class="eui-form-group eui--clearfix">
                <label for="name" class="eui-lable eui--font-26 eui--pull-left eui--black-color">
                    {{__("area")}}
                </label>
                <div class="eui-select-wrap eui--overflow-h eui--pull-left eui--position-rel">
                    <select name="area-select" id="" class="eui-select eui--position-rel">
                        <option value="MY">{{__("area_Malaysia")}}</option>
                        <option value="SG">{{__("area_Singapore")}}</option>
                        <option value="ID">{{__("area_Indonesia")}}</option>
                        <option value="PH">{{__("area_Philippines")}}</option>
                        <option value="AU">{{__("area_Australia")}}</option>
                        <option value="US">{{__("area_United_States")}}</option>
                        <option value="TH">{{__("area_Thailand")}}</option>
                        <option value="VN">{{__("area_Vietnam")}}</option>
                        <option value="UK">{{__("area_United_Kingdom")}}</option>
                        <option value="CA">{{__("area_Canada")}}</option>                    
                        <option value="NZ">{{__("area_new_Zealand")}}</option>
                        <option value="DE">{{__("area_Germany")}}</option>
                        <option value="RU">{{__("area_Russia")}}</option>
                        <option value="IT">{{__("area_Italy")}}</option>
                        <option value="FR">{{__("area_France")}}</option>
                        <option value="SA">{{__("area_Saudi_Arabia")}}</option>
                        <option value="UA">{{__("area_Ukraine")}}</option>
                        <option value="TW">{{__("area_Taiwan")}}</option>
                        <option value="HK">{{__("area_HongKong")}}</option>
                        <option value="MO">{{__("area_Macao")}}</option>
                        <option value="OT">{{__("area_other")}}</option>
                    </select>
                    <span class="eui-icon eui-icon-arrow_down_dark_grey eui--position-abs"></span>
                </div>                
            </div>
            <div class="eui-form-group  eui--margin-b-88">
                <label for="name" class="eui-lable eui--font-26 eui--black-color">
                    {{__("phone")}}
                </label>
                <input id="name" class="eui-input eui--font-26" type="text" placeholder='{{__("phone_input_tips")}}'>
            </div>
            <a class="btn-step eui-btn eui--width-100 eui-btn-lg eui-btn-primary" href="javascript:;">{{__("btn_send_code")}}</a>
        </form>
        <div class="page-tips eui--556c96-color eui--margin-t-100 eui--font-26">
            <p class="page-footer-title eui--position-rel eui--margin-b-20">{{__("title_tips")}}</p>
            <ol>
                <li>{{__("phone_tips_1")}}</li>
                <li>{{__("phone_tips_2")}}</li>
                <li>{{__("phone_tips_3")}}</li>
            </ol>
        </div>
        <div class="eui-screen-wrap eui--text-center">
            <span class="eui-icon eui-icon-gift_big eui--display-b"></span>
            <a href="javascript:;" class="eui-btn eui-btn-danger-outlined eui-btn-sm">{{__("btn_receive_serrated")}}</a>    
        </div>
    </div>
</div>

<div class="phone-code step-wrap eui--hide">
    <div class="eui-bar page-header eui-bar-fixed eui-bar-fixed-top">
        <div class="eui-bar-nav">
            <a href="javascript:;" class="btn-back eui-icon eui-icon-back"></a>
            <h1 class="page-title eui--text-center">{{__("bemember_phonecode_page_title")}}</h1>
        </div>
    </div>
    <div class="page-wrap eui--white-bacg">
        <div class="eui-login-form eui--margin-t-0">
            <p class="page-title-second eui--556c96-color eui--font-26">
                {{__("login_phonecode_page_tips_1")}} <span class="phone-num">XX-XXXXXXXXXXX</span>{{__("login_phonecode_page_tips_2")}}
            </p>
            <div class="input-list eui--text-center eui--clearfix">
                <div class="eui-input-grip eui--text-center">
                    <input type="number" class="eui--display-b eui--text-center" name="" value="" maxlength="1">                
                </div>    
                <div class="eui-input-grip eui--text-center">
                    <input type="number" class="eui--display-b eui--text-center" name="" value="" maxlength="1">                
                </div> 
                <div class="eui-input-grip eui--text-center">
                    <input type="number" class="eui--display-b eui--text-center" name="" value="" maxlength="1">                
                </div> 
                <div class="eui-input-grip eui--text-center">
                    <input type="number" class="eui--display-b eui--text-center" name="" value="" maxlength="1">                
                </div>  
                <div class="eui-input-grip eui--text-center">
                    <input type="number" class="eui--display-b eui--text-center" name="" value="" maxlength="1">                
                </div> 
                <div class="eui-input-grip eui--text-center">
                    <input type="number" class="eui--display-b eui--text-center" name="" value="" maxlength="1">                
                </div>           
            </div>
            <a class="btn-step eui-btn eui--width-100 eui-btn-lg eui-btn-primary" href="javascript:;">{{__("btn_resend")}}</a>
        </div>
        <div class="page-tips eui--556c96-color eui--margin-t-100 eui--font-26">
            <p class="page-card-title eui--position-rel eui--margin-b-20">{{__("title_tips")}}</p>
            <ol>
                <li>{{__("phone_tips_1")}}</li>
                <li>{{__("phone_tips_2")}}</li>
                <li>{{__("phone_tips_3")}}</li>
            </ol>
        </div>
        <div class="eui-screen-wrap eui--text-center">
            <span class="eui-icon eui-icon-gift_big eui--display-b"></span>
            <a href="javascript:;" class="eui-btn eui-btn-danger-outlined eui-btn-sm">{{__("btn_receive_serrated")}}</a>    
        </div>
    </div>
</div>

<div class="change-result step-wrap eui--hide">
    <div class="eui-bar page-header eui-bar-fixed eui-bar-fixed-top">
        <div class="eui-bar-nav">
            <a href="javascript:;" class="eui-icon eui-icon-back btn-back"></a>
            <h1 class="page-title eui--text-center">{{__("phone_verification_result_page_title")}}</h1>
        </div>
    </div>
    <div class="page-wrap eui--white-bacg">
        <div class="eui-login-form eui--margin-t-0">
            <p class="page-card-title page-card-title-blue eui--position-rel">
                {{__("phone_verification_result_card_title_1")}}
            </p>
            <div class="eui-media eui--font-26">
                <a class="eui-media-object eui--display-b phone-media-object" href="javascript:;">
                    <p>60-112**223</p>
                </a>
            </div>
        </div>
        <div class="page-tips eui--black-color eui--font-26">
            <p class="page-card-title page-card-title-blue eui--position-rel eui--margin-b-20">{{__("title_tips")}}</p>
            <ol>
                <li>{{__("phone_tips_1")}}</li>
                <li>{{__("phone_tips_2")}}</li>
                <li>{{__("phone_tips_3")}}</li>
            </ol>
        </div>
        <div class="eui-screen-wrap eui--text-center">
            <span class="eui-icon eui-icon-gift_big eui--display-b"></span>
            <a href="javascript:;" class="eui-btn eui-btn-danger-outlined eui-btn-sm">{{__("btn_receive_serrated")}}</a>    
        </div>
        <div class="page-footer eui--text-center eui--width-100">
            <a class="eui--display-b eui--556c96-color eui--font-26 eui--margin-b-20" href="/personal/beMember/memberName">{{__("phone_verification_result_page_tips")}}</a>
        </div>
    </div>
</div>
<script>
    $(function(){
        $('.step-wrap .btn-step').click(function(){
            $(this).parents('.step-wrap').hide().next().fadeIn(300);
        });
        $('.step-wrap .btn-back').click(function(){
            $(this).parents('.step-wrap').hide().prev().fadeIn(300);
        });
    });
</script>

{% endblock %}